<template>
  <div>
    <el-dialog width="65%" title="收货地址" style="padding: 30px 20px;" :visible.sync="dialogFormVisible">
      <el-form :model="addList"  :rules="rules" ref="ruleForm" :label-width="formLabelWidth" label-position="right">
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="品牌名称" prop="name" >
              <el-input style="width:80%;" size="mini" v-model="addList.name" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首字母">
              <el-input style="width:80%;" size="mini" v-model="addList.firstLetter " ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="排序" prop="name" >
              <el-input style="width:80%;" size="mini" v-model="addList.sort" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品数量">
              <el-input style="width:80%;" size="mini" v-model="addList.productCount" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="是否展示" prop="name" >
              <el-switch
                v-model="addList.showStatus"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否为品牌制造商">
              <el-switch
                v-model="addList.factoryStatus"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="上传专区大图" prop="name" >
              <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :headers="uploadHeader"
                  :show-file-list="false"
                  :on-success="uploadBigPic"
                  >
                  <img v-if="addList.bigPic" :src="addList.bigPic" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传logo">
              <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :headers="uploadHeader"
                  :show-file-list="false"
                  :on-success="uploadLogo"
                  >
                  <img v-if="addList.logo" :src="addList.logo" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBrandForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-card>
      <div slot="header">
        <el-button size="mini" @click="addBrand" type="primary">新增</el-button>
      </div>
        <el-table
          :data="list"
          border
          style="width: 100%">
          <el-table-column
            fixed
            type="index"
            align="center"
            label="#"
            width="50">
          </el-table-column>

          <el-table-column
            prop="name"
            align="center"
            label="品牌名称"
            width="150">
          </el-table-column>

          <el-table-column
            label="展示状态"
            align="center"
            width="200">
            <template slot-scope="scope">
              是否展示
              <el-switch
                v-model="scope.row.showStatus"
                @change="changeBrandShow(scope.row)"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column
            label="logo"
            align="center"
            width="150">
            <template slot-scope="scope">
              <img style="width:100px;height:100px;" :src="scope.row.logo" alt="">
            </template>
          </el-table-column>

          <el-table-column
            label="专区大图"
            align="center"
            width="150">
            <template slot-scope="scope">
              <img style="width:100px;height:100px;" :src="scope.row.bigPic" alt="">
            </template>
          </el-table-column>

          <el-table-column
            prop="brandStory"
            align="center"
            label="品牌故事"
            width="150">
          </el-table-column>

          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
            width="250">
          </el-table-column>

          <el-table-column
            prop="sort"
            align="center"
            label="排序"
            width="150">
          </el-table-column>

          <el-table-column
            prop="productCommentCount"
            align="center"
            label="产品评论数量"
            width="150">
          </el-table-column>

          <el-table-column
            prop="productCount"
            align="center"
            label="产品数量"
            width="150">
          </el-table-column>

          <el-table-column
            prop="isBrand"
            label="是否品牌制造商"
            align="center"
            width="180">
          </el-table-column>

          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="editBrand(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" @click="delBrands(scope.row.id)" style="color:red;" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
import {findBrandByPage,addBrand,delBrand,updateBrand,switchShowStatus} from '@/api/product/brand';
import mixin from '@/mixins/index';
export default {
  mixins:[mixin],
  data(){
    return{
      //获取品牌列表数据
      list:[],
      //新增品牌列表
      addList:{},
      //dialog框
      dialogFormVisible:false,
      formLabelWidth:"150px",
      rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
      }
    }
  },
  created(){
    this.getData()
  },
  methods:{
    //获取品牌列表数据
    getData(){
      findBrandByPage(this.page.currentPage,this.page.size).then(res=>{

        res.data.rows=res.data.rows.forEach(val => {
          if(val.factoryStatus==0){
            val.isBrand="否"
          }else{
            val.isBrand="是"
          }
          console.log(res.data.rows);
          this.list=res.data.rows
          this.page.total=this.page.total
        });
        
      })
    },
    //新增品牌
    addBrand(){
      this.dialogFormVisible=true
    },
    //编辑品牌
    editBrand(val){
      this.dialogFormVisible=true
      this.addList = val
    },
    //删除品牌
    delBrands(val){
      delBrand(val).then(res=>{
        if(res.success){
          // console.log(res);
          this.$message.success("删除成功")
        }
        this.getData()
      })
    },
    //控制显示隐藏
    changeBrandShow(val){
      switchShowStatus({
        id:val.id,
        status:val.showStatus
      }).then(res=>{
        if(res.success){
          console.log(res);
          this.$message.success("更改显示状态成功")
        }
      })
    },
    //上传专区大图
    uploadBigPic(res,file){
      this.addList.bigPic=res.data.fileUrl
    },
    //上传logo
    uploadLogo(res,file){
      this.addList.logo=res.data.fileUrl
    },
    //添加或编辑品牌
    addBrandForm(){
      if(this.addList.id){
        updateBrand(this.addList).then(res=>{
          // console.log(res);
          this.$message.success("编辑品牌成功")
          this.dialogFormVisible=false
          this.addList = {}
          this.getData()
        })
      }else{
        addBrand(this.addList).then(res=>{
          // console.log(res);
          this.$message.success("添加品牌成功")
          this.dialogFormVisible=false
          this.addList = {}
          this.getData()
        })
      }
      
    }
  }
}
</script>

<style lang="scss" scoped>
//上传图片样式
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>